<script>
import {pageBlog} from "../../api/blog";
import ArticleCard from "../../components/blog/ArticleCard.vue";
import MenuLine from "../../components/menu/MenuLine.vue";
import {listLeaf} from "../../api/dict";

export default {
    name: "Articles",
    components: {MenuLine, ArticleCard},
    data() {
        return {
            blogList: [],
            page: {
                current: 1,
                size: 10,
            },
            typeList:[],
            pages: 0,
            total: 0,
            title: '全部'
        }
    },
    methods: {
        init() {
            pageBlog(this.page)
                .then(res => {
                    if (res.code === 200) {
                        this.pages = res.data.pages
                        this.total = res.data.total
                        this.blogList = res.data.records
                    }
                })
        },
        typeSelect(i) {
            this.title = i.name
            this.page.current=1
            listLeaf(i.id, "resType")
                .then(res => {
                    if (res.code === 200) {
                        let param = {
                            current: this.page.current,
                            size: this.page.size,
                            typeId_in: res.data.map(i => i.id)
                        }
                        if (param.typeId_in.length === 0)
                            param.typeId_in.push(i.id)
                        this.typeList=param.typeId_in;
                        pageBlog(param)
                            .then(res => {
                                this.blogList = res.data.records
                                this.pages = res.data.pages
                                this.total = res.data.total
                            })
                    }
                })
        },
        handleSizeChange(size) {
            this.page.size=size;
            this.page.current = 1
            this.getDataList()
        },
        handleCurrentChange(cur) {
            this.page.current=cur;
            this.getDataList()
        },
        getDataList(){
            let param={
                current: this.page.current,
                size: this.page.size,
            }
            if (this.typeList.length>0)
                param.typeId_in=this.typeList
            pageBlog(param)
                .then(res => {
                    console.log(res)
                    if (res.code === 200) {
                        this.pages = res.data.pages
                        this.total = res.data.total
                        this.blogList = res.data.records
                    }
                })
        }
    },
    mounted() {
        this.init();
    }
}
</script>
<template>
    <div style="width: 100%;height: 1900px;position: relative;">
        <img src="/tmp/10.jpg" alt="" style="height: fit-content;width: 100%;position: absolute">
        <div class="flex center align-center" style="position: absolute;width: 100%;margin-top: 70px">
            <h1 style="color: #918d8d">{{ title }}</h1>
        </div>

        <div class="flex row center min-main-height"
             style="width: 100%;height:1800px;position: absolute;margin-top: 200px">
            <MenuLine @select="typeSelect" style="margin-right: 20px"/>
            <div class="flex column align-center" style="width: 50%;height: 100%">
                <ArticleCard style="background: white;" v-for="(item,i) in blogList" :key="i" :index="i" :value="item"/>
                <el-pagination background layout="sizes, prev, pager, next"
                               :page-count="pages"
                               :page-size="page.size"
                               :current-page="page.current"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :total="total"/>
            </div>
        </div>
    </div>

</template>


<style scoped>

</style>
